/* tools */
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-sb {
  display: flex;
  justify-content: space-between;
}
.flex-sa {
  display: flex;
  justify-content: space-around;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-start {
  align-items: flex-start;
}
.flex-end {
  align-items: flex-end;
}
.flex-md {
  align-items: center;
}
.flex-ct {
  justify-content: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.inline-block {
  display: inline-block;
}

/* margin */
.m-5 {
  margin: 5px;
}
.m-10 {
  margin: 10px;
}
.m-15 {
  margin: 15px;
}
.m-20 {
  margin: 20px;
}
/* padding */
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-15 {
  padding: 15px;
}
.p-20 {
  padding: 20px;
}

/* 水平方向的 margin */
.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mx-15 {
  margin-left: 15px;
  margin-right: 15px;
}
.mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}
/* 竖直方向的 margin */
.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.ml-5 {
  margin-left: 5px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-15 {
  margin-left: 15px;
}
.ml-20 {
  margin-left: 20px;
}


/* 水平方向的 padding */
.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

/* 竖直方向的 padding */
.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
